<template>
	<b-layout-index>

		<view class="container" id="app">
			<!-- 顶部导航 -->

			<theme-color-bg type="c3">
				<navbar isStyle="drak" :title="$t('工作台')"></navbar>
				<!-- 商家信息 -->
				<view class="merchant">
					<view class="merchant-info">
						<image :src="show.avatar" class="merchant-avatar" />
						<view class="merchant-detail">
							<text class="merchant-name">{{show.name}}</text>
							<text class="merchant-id">{{$t('手机号')}}：{{show.phone}}</text>
						</view>
					</view>
				</view>

				<view class="pd-top-10 pd-bottom-10">
					<u-grid :border="false" @click="click">
						<u-grid-item v-for="(item,index) in headersList" :key="index">
							<u--text color="#ffffff" size="14" mode="price" :text="show[item.key]"></u--text>
							<text class="grid-text font-size-12">{{$t(item.title)}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</theme-color-bg>
			<!-- 功能区 -->
			<view class="menu">
				<view v-for="(item, index) in menuItems" :key="index" class="menu-item" @click="goClick(item)">
					<view :class="['menu-icon-wrapper', item.bgClass]">
						<iconfont :icon="item.icon" size="24" color="#FFFFFF" />
						<text v-if="item.badge" class="badge">{{ item.badge }}</text>
					</view>
					<text class="menu-title">{{ $t(item.title) }}</text>
				</view>
			</view>


			<!-- 基本信息展示区 -->
			<view class="info-card">
				<view class="card-title">基本信息</view>
				<view class="info-list">
					<view class="info-item" v-for="(item, index) in listForm" :key="index">
						<text class="info-label">{{ $t(item.name) }}</text>
						<text v-if="item.mode=='date'">{{$u.date(show[item.key],item.format?item.format:'')}}</text>
						<u--text v-else size="12" :format="item.format?item.format:''"
							:mode="item.mode?item.mode:'text'" :text="show[item.key]"></u--text>
					</view>
				</view>
			</view>


		</view>
	</b-layout-index>
</template>

<script>
	import {
		getFindById
	} from "@/api/user.js";
	export default {
		data() {
			return {
				status: 0,
				statusShow: false,
				statusTitle: "",
				statusContent: "",
				show: {},
				title: "",
				page: 0,
				type: 0,
				menuItems: [{
						title: '业绩',
						icon: 'icon-quxiantu',
						bgClass: 'bg-blue',
						badge: 0,
						url: "/page/workbench/pages/agent/performance/main"
					},

					{
						title: '提现',
						icon: 'icon-qianbao2',
						bgClass: 'bg-red',
						badge: 0,
						url: "/page/manager/pages/finance/withdrawal/index"
					},
					{
						title: '记录',
						icon: 'icon-danju',
						bgClass: 'bg-yellow',
						badge: 0,
						url: "/page/manager/pages/finance/log/index"
					},
					{
						title: '代理',
						icon: 'icon-wode',
						bgClass: 'bg-purple',
						badge: 0,
						url: "/page/workbench/pages/agent/team/index"
					},{
						title: '购买',
						icon: 'icon-shangpinguanli-jianying',
						bgClass: 'bg-green',
						badge: 0,
						url: "/page/manager/pages/shop/index"
					},
					
				],

				listForm: [{
						icon: 'icon-qianbao',
						name: "名称",
						key: "name",
						mode: "name"
					},
					{
						icon: 'icon-qianbao',
						name: "代理名称",
						key: "agentName"
					},
					{
						icon: 'icon-chazhao',
						name: "邀请码",
						key: "invite"
					},
					{
						icon: 'icon-tuisong',
						name: "手机号",
						key: "phone"
					},
					 {
						icon: 'icon-qianbao',
						name: "管理上级",
						key: "parentName"
					}
				],
				headersList: [{
						name: 'photo',
						key: "balance",
						title: '余额'
					},
					{
						name: 'lock',
						key: "withdrawal",
						title: '提现余额'
					},
					{
						name: 'star',
						key: "withdrawalWait",
						title: '提现申城'
					},
				]



			}
		},
		onLoad: function(options) {

			this.fetchByWithdrawalShow(options.id ? options.id : 0)
		},
		onReachBottom: function() {

		},
		methods: {
			fetchByWithdrawalShow: function(id = 0) {

				getFindById(id).then(res => {
					var title = res.authName ? res.authName : res.name;
					this.title = title
					wx.setNavigationBarTitle({
						title: title
					})
					this.show = res
				})

			},
			openPriview: function(e) {
				var url = e.currentTarget.dataset.url;
				uni.previewImage({
					urls: [url]
				})
				console.log(e, url)
			},

			goClick: function(item) {
				console.log(item)
				if (item.url) {
					var show = this.show;
						console.log(item.url)
					uni.navigateTo({
						url: item.url + "?userId=" + show.id + "&name=" + show.name+"&agentId="+this.show.agentId
					})
				}
			}


		}
	}
</script>

<style>
	.grid-text {
		margin-top: 10px;
	}

	.grid-value {
		color: #7e9c52;
	}

	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100%;
	}

	.mr-20 {
		margin-right: 20px;
	}

	.merchant {
		position: relative;
	}

	.merchant-bg {
		height: 100rpx;

	}

	.merchant-info {

		left: 0;
		right: 0;
		top: 0;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.merchant-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid #FFFFFF;
	}

	.merchant-detail {
		margin-left: 20rpx;
		margin-left: 10px;
		display: grid;
		padding: 10px;
	}

	.merchant-name {
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.merchant-id {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.menu {
		display: flex;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;

	}

	.menu-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bg-blue {
		background-color: #3b82f6;
	}

	.bg-green {
		background-color: #22c55e;
	}

	.bg-red {
		background-color: #ef4444;
	}

	.bg-yellow {
		background-color: #eab308;
	}

	.bg-purple {
		background-color: #a855f7;
	}

	.badge {
		position: absolute;
		right: -8rpx;
		top: -8rpx;
		background-color: #ef4444;
		color: #FFFFFF;
		font-size: 20rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu-title {
		margin-top: 12rpx;
		font-size: 20rpx;
		color: #666666;
	}

	.stats {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.stats-title {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.vconsole-btn {
		background-color: #22c55e;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.time-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 100rpx;
		padding: 4rpx;
		margin-bottom: 30rpx;
	}

	.time-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #666666;
	}

	.time-tab-active {
		background-color: #3b82f6;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.chart {
		width: 100%;
		height: 400rpx;
	}

	.sales {
		margin-top: 40rpx;
	}

	.sales-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sales-more {
		display: flex;
		align-items: center;
	}

	.sales-more-text {
		font-size: 24rpx;
		color: #999999;
		margin-right: 8rpx;
	}

	.sales-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 100rpx;
		padding: 4rpx;
		margin-bottom: 30rpx;
	}

	.sales-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #666666;
	}

	.sales-tab-active {
		background-color: #3b82f6;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.sales-data {
		display: flex;
		gap: 20rpx;
	}

	.sales-card {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx;
		display: grid;
		text-align: center;
	}

	.sales-value {
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;
	}

	.sales-label {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
	}

	.info-card {
		margin: 15rpx;
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.card-title {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
		margin-bottom: 32rpx;
	}

	.info-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		width: 250rpx;
		color: #333333;
		font-size: 12px;
	}

	.info-value {
		flex: 1;
		color: #666666;
		font-size: 12px;
	}
</style>